﻿@using Model.Admin
@using Xproject.Util
@using Model.WXshopBuiness.Enum
@{
    string Domain = CommonHelper.GetAppSettings("Domin");
    Layout = "~/Views/Shared/_ShopLayout.cshtml";
    ViewBag.Title = "我的购物车";
}
    
    <style type="text/css">
        .smallfont {
            font-size: 1.3rem;
        }

        .active {
            color: #246fc0;
            background-color: pink;
        }

        .textover {
            
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .yikanjia {
           color:yellow;
        }
        .yikanjiange {
            background-image: url("../../Content/Image/Promotions/KanJia/tf.png")  ;
            width: 100%;
            height: 90%;
            background-size: 100% 90%;
            position: absolute;
        }
         .div_right {
            
            bottom: 10px;
            right: 4%;
            border: solid 1px #e6e6e6;
            border-radius: 4px;
            width: 82px;
            overflow: hidden;
            text-align: center;
            line-height: 20px;
        }

            .div_right i {
                float: left;
                width: 33%;
                color: #333;
                font-style: normal;
            }

             .div_right span {
                float: left;
                width: 33%;
                border-left: solid 1px #e6e6e6;
                border-right: solid 1px #e6e6e6;
                color: #333;
            }

    </style>
 
    <!--top-->
    <div class="top_c">
        <a href="~/UserCenter/UserCenter" class="iconfont icon-jiantou-copy-copy"></a>
        <p class="titi">我的购物车</p>
    </div>

    <!--头部-->
    <div class="pos">
        <div class="container">
        </div>
    </div>

    <!--列表-->

    <div id="wrapper">
        <div id="scroller">
            <div id="pullDown">
                <span class="pullDownIcon"></span>
                <span class="pullDownLabel">下拉刷新...</span>
            </div>
            <div class="ding_d" id="thelist" style="margin-top:0px">
            </div>
            <div id="pullUp" style="margin-top:0px">
                <span class="pullUpIcon"></span>
                <span class="pullUpLabel">上拉加载更多...</span>
            </div>
        </div>
    </div>
  
    <input type="hidden" id="hiddenType" value="@ViewBag.OrderState" />

    <script src="~/Scripts/shop/jquery.min.js" type="text/javascript"></script>

    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/shop/index.js"></script>
    <script src="~/Scripts/iscroll.js"></script>
    <script src="~/Content/layerui/layer.js"></script>
    <script type="text/javascript">

            var myScroll,
                pullDownEl,
                pullDownOffset,
                pullUpEl,
                pullUpOffset;

            //todo 自己定义的变量
            var userDataSum,//存储数据的变量
                addNum = 0,
                stepLength = 8,//每次加载的步长
                ajaxIndex = 1,
                sumL = 0;//数据的长度
            /**
             *  刷新滚动区域的滚动条的位置（此方法在添加数据后调用）
             **/
            function refreshScrollBar() {
                console.log("刷新滚动条");
                setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
                    myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
                }, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
            }

            function pullDownAction() {
                console.log("下拉");

                setTimeout(function () {
                    (function reloadPage() {
                        if (GetQueryString("_rf")) {
                            window.location.href = window.location.href.replace(GetQueryString("_rf"), Math.random());
                        } else {
                            window.location.href = window.location.href + (window.location.href.indexOf("?") > -1 ? "&" : "?") + "_rf=" + Math.random();
                        }
                    })();
                    myScroll.refresh();
                    console.log($("#thelist").height())
                }, 1000);
            }
            //初始化数据
            function pullUpAction() {
                console.log("上拉");

                setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!

                    getData(ajaxIndex, stepLength);
                    myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
                }, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
            }

            function loaded() {
                pullDownEl = document.getElementById('pullDown');
                pullDownOffset = pullDownEl.offsetHeight;
                pullUpEl = document.getElementById('pullUp');
                pullUpOffset = pullUpEl.offsetHeight;
                myScroll = new iScroll('wrapper', {
                    useTransition: true,
                    topOffset: pullDownOffset,
                    onRefresh: function () {
                        if (pullDownEl.className.match('loading')) {
                            pullDownEl.className = '';
                            pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                        } else if (pullUpEl.className.match('loading')) {
                            pullUpEl.className = '';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                        }
                    },
                    onScrollMove: function () {
                        if (this.y > 5 && !pullDownEl.className.match('flip')) {
                            pullDownEl.className = 'flip';
                            pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                            this.minScrollY = 0;
                        } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                            pullDownEl.className = '';
                            pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                            this.minScrollY = -pullDownOffset;
                        } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                            pullUpEl.className = 'flip';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
                            this.maxScrollY = this.maxScrollY;
                        } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                            pullUpEl.className = '';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                            this.maxScrollY = pullUpOffset;
                        }
                    },
                    onScrollEnd: function () {
                        if (pullDownEl.className.match('flip')) {
                            pullDownEl.className = 'loading';
                            pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';

                            refreshScrollBar();
                            pullDownAction();	// Execute custom function (ajax call?)
                        } else if (pullUpEl.className.match('flip')) {
                            pullUpEl.className = 'loading';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
                            if (userDataSum!=0 ) {
                                pullUpAction();	// Execute custom function (ajax call?)

                            } else {
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = "数据已全部加载完毕！";
                            }
                        }
                    }
                });

                setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
            }

            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

            document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

            function GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                return (r != null && r.length >= 2) ? decodeURI(r[2]) : null;
            }

            getData(ajaxIndex, stepLength);

            function getData(index, pagesize) {
                layer.open({ type: 2, shadeClose: false });
                var type = $("#hiddenType").val();
                $.ajax({
                    type: "get",
                    url: "@(ViewBag.DomainUrl + "/Order/partialMyShopCarList")" + "?type=" + type+"&index=" + index + "&pagesize="+pagesize,
                    dataType: "json",
                    success: function (data) {
                        userDataSum = data.Data.length;
                        var datas = "";
                        if (userDataSum != 0) {
                            ajaxIndex++;
                        }
                            for (var i = 0; i < data.Data.length; i++) {
                                datas = datas + BuildDIViitem(data.Data[i]);
                        }

                            $("#thelist").append(datas);
                            layer.closeAll('dialog');
                    }
                })
            }

            function GetStatusText(state) {
                var text = "待支付";
                if (state == 0) {
                    text = "待支付";
                }
                return text;
            }

            function BuildOper(ShopCarId, state, HasKanJia, KanJiaID, StrAleradKanJiaMoney, PromotionID) {

                var text = '<a href="#" onclick="PayThisShopCar(\'' + ShopCarId +'\')"  class="liji">去付款</a>' +
                    ' <a href="#" onclick="DelThisShopCarId(\'' + ShopCarId +'\')"  class="qu">取消</a>';


                return text;
            }


            function PayThisShopCar(ShopcarId) {
                layer.open({ type: 2, shadeClose: false });
                 $.ajax({
                    type: "POST",
                    url: '@(Domain)/Order/PayThisShopCar',
                    data: { ShopcarId: ShopcarId },
                    cache: false,
                    success: function (data) {

                        layer.open({
                            content: data.Data
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                            , end: function () {
                                layer.closeAll('dialog');
                            }
                        });
                        if (data.Success == true) {
                            window.location.href = "@(Domain + "/Order/PayOrderDetail?orderId=")" + data.orderId  ;
                        }
                    },
                    error: function (data) {
                    }
            });
            }

            function BuildDIViitem(data) {

                var div = '<div class="on_d" id="div_' + data.ShopCarId + '">' +
                    '<div class="sp_pr">' +
                    '<a href="/shop/ProductDetail?productId=' + data.ProductId + '">' +
                    '<img src="' + data.ProductImgUrl + '">' +
                    '</a>' +
                    ' <div class="text_p" style="float:none">' +
                    '<p class="smallfont textover">' + data.ProductName + '</p>' +
                    '<p class="smallfont textover">' + data.ProductDesc + '</p>' +
                    '<p class="smallfont textover" style="color:#82f160">规格：' + data.ProductSpecificationNameStr + '</p>' +
                    '<h3 class="smallfont textover">加入时间' + data.StrCreateTime + '</h3>' +
                    '<div style="display:block;">'+
                    '<div style="display:inline-block;width:33%;"><span style="color:red;font-size:1.2em">￥<em >' + data.StrSignlePrice +'</em></label></span></div>'+
                    '<div style="display:inline-block;width:33%;" class="div_right">'+
                    '<i onclick="reducew(this,\'' + data.ShopCarId+'\')">-</i><span class="zi" id="ProductNum_' + data.ShopCarId+'">' + data.ProductNum+'</span>'+
                    '<input type="hidden" id="hidden_ProductNum_' + data.ShopCarId+'" value="' + data.ProductNum+'">'+
                    '<i onclick="plusw(this,\'' + data.ShopCarId+'\')" > +</i>'+
                               '</div>'+
                    '<div style="display:inline-block;width:33%;text-align: right"><span style="color:red;font-size:1.2em" id="ALLMoney_' + data.ShopCarId+'" >总价：' + data.StrAllMoney +'</span></div>'+
                        '</div>'+
                    '</div>' +
                    '</div>' +
                    ' <div class="button">' + BuildOper(data.ShopCarId, data.ItemState, '', '', '', '') +
                    ' </div>' +
                    '</div>';
                return div;
            }


           function addKanJiaFromShopCar(orderId) {
               layer.open({ type: 2, shadeClose: false });
              $.ajax({
                    type: "POST",
                    url: '@(Domain)/Promotions/addKanJiaFromShopCar',
                    data: { orderId: orderId },
                    cache: false,
                    success: function (data) {

                        layer.open({
                            content: data.Data
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                            , end: function () {
                                layer.closeAll('dialog');
                            }
                        });
                        if (data.Success == true) {
                            window.location.href = "@(Domain + "/Promotions/KJPromotions?KanJiaID=")" + data.KanJiaId  ;
                        }
                    },
                    error: function (data) {
                    }
            });
         }


           function DelThisShopCarId(shopcarId) {

                layer.open({
                    content: '您确定要从购物车移除此商品吗？'
                    , btn: ['确定', '不要']
                    , yes: function (index) {
                        layer.open({ type: 2, shadeClose: false });
                         $.ajax({
                            type: "post",
                            url: "@(ViewBag.DomainUrl + "/Order/DelThisShopCarId")",
                            dataType: "json",
                            data: { shopcarId: shopcarId },
                            success: function (data) {
                                if (data.Success == true) {
                                    $("#div_" + shopcarId).remove();
                                    layer.open({
                                        content: data.Data
                                        , skin: 'msg'
                                        , time: 2 //2秒后自动关闭
                                        , end: function () {
                                            layer.closeAll('dialog');
                                        }
                                    });
                                } else {
                                    layer.open({
                                        content: data.Data
                                        , skin: 'msg'
                                        , time: 2 //2秒后自动关闭
                                        , end: function () {
                                            layer.closeAll('dialog');
                                        }
                                    });
                                    layer.closeAll('dialog');
                                }
                                }
                        })
                    }
                });
            }
           function reducew(obj, shopcarid) {
               layer.open({ type: 2, shadeClose: false });
               var $this = $(obj);
               var num = Number($("#ProductNum_" + shopcarid).text());
                $.ajax({
                            type: "post",
                            url: "@(ViewBag.DomainUrl + "/Order/ModifyShoppingCarNums")",
                            dataType: "json",
                            data: { shopcarId: shopcarid,type:"redu" },
                            success: function (data) {
                                if (data.Success == true) {
                                    num--;
                                    $("#ProductNum_" + shopcarid).text(num);
                                    $("#hidden_ProductNum_" + shopcarid).val(num);
                                    $("#ALLMoney_" + shopcarid).text("总价：" + data.Total);
                                    layer.open({
                                        content: data.Data
                                        , skin: 'msg'
                                        , time: 1 //2秒后自动关闭
                                        , end: function () {
                                            layer.closeAll('dialog');
                                        }
                                    });
                                }
                                }
                        })
           }
           function plusw(obj,shopcarid) {
               //加
               layer.open({ type: 2, shadeClose: false });
               var $this = $(obj);
               var num = Number($("#ProductNum_" + shopcarid).text());
                 $.ajax({
                            type: "post",
                            url: "@(ViewBag.DomainUrl + "/Order/ModifyShoppingCarNums")",
                            dataType: "json",
                            data: { shopcarId: shopcarid,type:"plus" },
                            success: function (data) {
                                if (data.Success == true) {
                                    num++;
                                    $("#ProductNum_" + shopcarid).text(num);
                                    $("#hidden_ProductNum_" + shopcarid).val(num);
                                    $("#ALLMoney_" + shopcarid).text("总价：" + data.Total);
                                    layer.open({
                                        content: data.Data
                                        , skin: 'msg'
                                        , time: 1//2秒后自动关闭
                                        , end: function () {
                                            layer.closeAll('dialog');
                                        }
                                    });
                                }
                                }
                        })
           }
    </script>
 